<template>
  <div class="app-container">
    <el-card class="card">
      <div class="header-section">

      </div>
      <div class="content-container">
        <div class="main-section">
          <!-- 报告数据部分 -->
          <el-row class="title-row">
            <el-col :span="24" class="title-col">
              <h2 class="title">用电报告详情</h2>
            </el-col>
          </el-row>
          <hr class="divider" />
          <el-row>
            <el-col :span="6">总能量消耗:</el-col>
            <el-col :span="6">{{ report.allEnergy }}
              <span v-if="report.allEnergy > 355" class="red-marker">（高消耗）</span>
            </el-col>
          </el-row>
          <hr class="divider" />
          <el-row>
            <el-col :span="6">最大能量消耗:</el-col>
            <el-col :span="7">{{ report.maxEnergy }}</el-col>
          </el-row>
          <hr class="divider" />
          <el-row>
            <el-col :span="6">最小能量消耗:</el-col>
            <el-col :span="6">{{ report.minEnergy }}
              <span v-if="report.minEnergy > 12" class="red-marker">（偏高）</span>

            </el-col>
          </el-row>
          <hr class="divider" />
          <el-row>
            <el-col :span="6">平均能量消耗:</el-col>
            <el-col :span="4">{{ report.meanEnergy }}
              <span v-if="report.meanEnergy >= 12" class="red-marker">（偏高）</span>
            </el-col>
          </el-row>
          <hr class="divider" />
          <el-row>
            <el-col :span="6">最大电流：</el-col>
            <el-col :span="4">10A</el-col>
          </el-row>
          <hr class="divider" />
          <el-row>
            <el-col :span="6">最大电压:</el-col>
            <el-col :span="4">250V</el-col>
          </el-row>
          <hr class="divider" />
          <el-row>
            <el-col :span="6">电流标准：</el-col>
            <el-col :span="4">10A</el-col>
          </el-row>
          <hr class="divider" />
          <el-row>
            <el-col :span="6">电压标准范围：</el-col>
            <el-col :span="8">198V-235.4V</el-col>
          </el-row>
          <hr class="divider" />
          <!-- 其他报告数据行 -->
          <!-- ... -->
        </div>
        <div class="analysis-section">
          <advice></advice>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
import advice from "@/views/system/advice/index";
import { getReport } from '@/api/system/report';
import { getBillDetail, getBillList } from "@/api/system/bill";
import { getUserProfile } from "@/api/system/user";


export default {
  name: "report",

  components: {
    advice
  },
  data() {
    return {
      loading: true,
      billDetail: {},// 账单详情
      billInfoId: null,// 账单id
      report: {},// 报告数据
      userId: null,// 用户id
      adviceGenerated: false,
      showAdvice: false,
      generatedAdvice: '',

    };
  },
  mounted() {
    this.getList();
    console.log("mounted...")
  },
  methods: {
    getList() {
      // 获取用户ID
      getUserProfile().then(response => {
        if (this.$route.params.userId) {
          this.userId = this.$route.params.userId;
        } else {
          this.userId = response.data.userId;
        }
    
        if(this.$route.params.billInfoId){

        // 获取路由中的用电报告ID
        this.billInfoId = this.$route.params.billInfoId;
        console.log(this.billInfoId)
        // 获取账单详情(用电报告ID)
          this.getReportMethod();
        }else{
          getBillList(this.userId).then(response => {
            console.log(response);
            this.billInfoId = response[0].billInfoId;
            this.getReportMethod();
          })
        }
      })
    },
    // 获取报告数据
    getReportMethod() {

      getBillDetail(this.billInfoId).then(response => {

        this.billDetail = response;
        this.billDetail.billDate = response.billDate.match(/^(\d{4}-\d{2})/)[0];
      }),
        getReport(this.billInfoId).then(response => {
          console.log(response);
          this.report = response;
        })
    },




  },
};
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 90vh;
  /* 设置容器高度为视口高度的100% */
  /*overflow: hidden;*/
  /* 隐藏超出容器的内容，防止滚动条出现 */
  /* 或者，如果你希望内容超出时显示滚动条，但只在水平方向上，可以使用以下设置：*/
  /* overflow-x: auto; */
  /* overflow-y: hidden; */

  /* 如果需要，可以添加内边距或边框等 */
  padding: 20px;
  /* 根据需要添加内边距 */
  box-sizing: border-box;
  /* 确保内边距和边框不会增加容器的宽度 */
}

.card {
  width: 100%;
}

.red-marker {
  color: red;
  font-weight: bold;
  /* 你可以根据需要添加更多的样式 */
  margin-left: 3px;
  /* 与前面的数字保持一点间距 */
}

.header-section {
  padding: 10px;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
}

.content-container {
  display: flex;
  justify-content: space-between;
}

.main-section {
  /* 自定义主区域样式，占据左半部分（或根据需求调整） */
  flex: 1;
  padding: 0px;
}

.analysis-section {
  /* 自定义分析区域样式，占据右半部分（宽度可以根据需求调整） */
  flex: 1;
  padding: 0px;
  border-left: 1px solid #ddd;
  /* 根据需要调整min-width或max-width */
  margin-left: -150px;
  min-width: calc(50% - 20px);
  /* 减去一些间距 */
}

.advice-box {
  /* 自定义建议框样式 */
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 20px;
}



.title {
  font-size: 20px;
  /* 标题字体大小 */
  font-weight: bold;
  /* 标题加粗 */
  color: #333;
  /* 标题颜色 */
  /* 还可以添加其他样式，如背景色、边框、阴影等 */
}

.divider {
  border: none;
  /* 移除默认的边框 */
  height: 1px;
  /* 设置高度 */
  color: #ddd;
  /* 设置颜色 */
  background-color: #ddd;
  /* 设置背景颜色 */
  margin: 20px 0;
  /* 上下外边距 */
  width: 30vw;
}
</style>
